<template>
	<view class="body-wrap">
		<!-- 顶部轮播图 -->
		<view class="header-swiper-warp">
			<u-swiper :list="headerSwiperList" indicator height="400rpx" radius="0"></u-swiper>
		</view>

		<!-- 课程基础信息 -->
		<view class="base-info-wrap">
			<view class="title-wrap">
				<text class="title u-line-1"></text>
				<text class="sub-title u-line-1"></text>
			</view>
			<u-line margin="30rpx 0"></u-line>
			<view class="list-wrap">
				<view class="info-cell-wrap">
					<view class="left">
						<u-icon name="bookmark-fill" size="20" color="#FFBE59"></u-icon>
						<text class="u-m-l-10">课程名称</text>
					</view>
					<text class="right-info u-line-1">{{this.courseByCourseId.courseName}}</text>
				</view>
				<view class="info-cell-wrap">
					<view class="left">
						<u-icon name="account-fill" size="20" color="#FFBE59"></u-icon>
						<text class="u-m-l-10">课程标题</text>
					</view>
					<text class="right-info u-line-1">{{this.courseByCourseId.courseTitle}}</text>
				</view>
				<view class="info-cell-wrap">
					<view class="left">
						<u-icon name="plus-people-fill" size="20" color="#FFBE59"></u-icon>
						<text class="u-m-l-10">课程时长</text>
					</view>
					<text class="right-info u-line-1">{{this.courseByCourseId.courseMin}}小时</text>
				</view>
				<view class="info-cell-wrap">
					<view class="left">
						<u-icon name="grid-fill" size="20" color="#FFBE59"></u-icon>
						<text class="u-m-l-10">课程价格</text>
					</view>
					<text class="right-info u-line-1">{{this.courseByCourseId.courseMoney}}元</text>
				</view>
			</view>
		</view>
		
		<!-- 本门课程的简介 -->
		<view class="card-list-wrap">
			<view class="card-header" @click="$u.route('pages/school/detail')">
				<text class="title">课程简介</text>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
			<view class="school-card-wrap">
				<view class="school-des-wrap">
					<u-avatar src="/static/img/school_logo1.png" shape="square" size="56"></u-avatar>
					<text>{{this.courseByCourseId.courseAbout}}</text>
				</view>
			</view>
		</view>

		<!-- 课程详情 -->
		
		<view class="card-list-wrap">
			
			<view class="card-header">
				<text class="title">课程章节</text>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
			<view class="school-card-wrap">
				 <u-collapse
				    :value="['2']"
					:border="false"
				  >
				    <u-collapse-item
						v-for="(item,index) in getcousesection " 
				    >
					  <text 
						slot="title" 
						class="u-page__item__title__slot-title" 
						style="font-size: 15px;font-weight: bold;color: #808080;"
					>{{item.sectionName}}</text>
					  <uni-card
						  type="h4" 
						  :title="'•'+item.sectionName" 
						  color="#2490ff" 
						  v-for="(item,index) in item.sectionList"
						  @click="openBrowser(item.address)"
					  ></uni-card>
				      <!-- <uni-title type="h4" title="• 涵盖uniapp各个方面2" color="#2490ff"></uni-title>
					  <uni-title type="h4" title="• 涵盖uniapp各个方面3" color="#2490ff"></uni-title> -->
				    </u-collapse-item>
				    <!-- <u-collapse-item

				       
				     >
				       <text slot="title" class="u-page__item__title__slot-title" style="font-size: 15px;font-weight: bold;color: #808080;">文档指南2</text>
				       <uni-title type="h4" title="• 涵盖uniapp各个方面" color="#2490ff"></uni-title>
				     </u-collapse-item> -->
				   <!-- <u-collapse-item
				      name="2"
				      title="众多利器"
				    >
				      <text slot="title" class="u-page__item__title__slot-title" style="font-size: 15px;font-weight: bold;color: #808080;">文档指南3</text>
				      <uni-title type="h4" title="• 涵盖uniapp各个方面" color="#2490ff"></uni-title>
				    </u-collapse-item> -->
				  </u-collapse>
			</view>
		</view>

		<!-- 对冲工具栏高度 -->
		<u-gap height="50"></u-gap>

		<!-- 以下是各种弹出层 -->

		<!-- 预约领礼品弹出层 -->
		<u-popup :show="orderGiftPopupShow" round="20" closeOnClickOverlay closeable
			@close="orderGiftPopupShow = false">
			<view class="popup-slot-wrap">
				<view class="popup-title">
					预约线下试听
				</view>
				<view class="popup-body">
					<view class="coupon-card-wrap">
						<view class="list u-line-1">
							<text class="name">免费试听</text>
							<text class="info">线下预约免费试听java精品课程</text>
						</view>
					</view>
					<view class="contact-tips-info">
						<text class="u-m-b-10">预约后学校将通过电话联系您</text>
						<view class="phone-wrap" @click="telShow = true">
							<text class="u-m-r-20">
								{{userInfo.telephone |filterTel }}
							</text>
							<text class="u-m-r-5">修改</text>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
			
						<!-- 修改电话模糊框 -->
						<view>
							<u-modal :show="telShow" :title="title" confirmText="确定" :showConfirmButton="true"
								cancelText="取消" :showCancelButton="true" @confirm="confirm()" @cancel="cancel()">
								<view>
									<uni-forms-item label="手机号" label-width="280px" label-position="top" required>
										<uni-easyinput type="number" v-model="userInfo.telephone"
											placeholder="请输入手机号码"></uni-easyinput>
									</uni-forms-item>
								</view>
							</u-modal>
						</view>
					</view>
					<view class="buy-tips-info">
						<view class="info">
							<u-icon name="checkmark-circle" size="10"></u-icon>
							<text class="u-m-l-5">无强行推销</text>
						</view>
						<view class="info">
							<u-icon name="checkmark-circle" size="10"></u-icon>
							<text class="u-m-l-5">不泄露用户手机号码</text>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<u-button type="success" text="试听预约" @click="subscribeListenDown(messageParam)"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- 底部工具栏 -->
		<view class="toolbar-wrap">
			<view class="left">
				<view class="favorite-btn">
					<u-icon name="star" size="22" color="#FFBE59"></u-icon>
					<text>收藏</text>
				</view>
				<view class="like-btn">
					<u-icon name="share" size="22" color="#FFBE59"></u-icon>
					分享
				</view>
			</view>
			<view class="right">
				<u-button text="免费预约" type="success" size="normal" shape="circle" :customStyle="{width: '100%'}"
					@click="orderGiftPopupShow = true">
				</u-button>
			</view>
			
		</view>
		<view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseType:0,
				auditionApplication:{
					id:'',
					applicationId:'',
					applicationName:'',
					userId:'',
					courseId:'',
					applicationDatetime:null,
					applicationType:'0',
					applicationStatus:'0',
					createBy:"",
				},
				course:{
					courseId:"",
				},
				courseByCourseId:{},
				courseTypeName:{},
				getcousesection:[],
				userInfo: {
					telephone: '',
					updateTelephone: '',
					userUname:'',
					userId:''
				},
				messageParam:{
					type: 'success',
					message: "已发出预约",
					duration:5000,
					position:"top",
				},
				Urls: {
					"showMajorCourse": "/audition/auditionApplication/showMajorCourse",//专业课程联动选择
					"nowSubcribe":"/audition/auditionApplication/nowSubcribe",//立即预约--预约线下试听
					"noticesCountUrl":"/notices/notices/noticesCount",
				},
				telShow: false,
				title: '',
				headerSwiperList: ['/static/img/school_logo1.png', '/static/img/school_logo2.png'],
				desToggle:true,
				content: `<img src="https://cdn.huiwenhuiyi.com/uploads/20220317/FgN7Fze_S1Oty8t5KLpmlS0LYzKV.jpg">`,
				orderGiftPopupShow: false,
				courseUrl:{
					selectCourseByCourseId:"/course/course/selectCourseByCourseId",
					selectCourseTypeBymajorTypeId:"/course/course/selectCourseTypeBymajorTypeId",
					selectCourseSectionbyCourseId:"/course/course/getcousesection",
				}
			}
		},
		created(){
			this.userInfo = uni.getStorageSync('user');
			this.userInfo.telephone=uni.getStorageSync('user').userPhone;
			this.userInfo.userId = uni.getStorageSync('user').userId;
		},
		methods: {
			/* 预约线下试听 */
			subscribeListenDown(messageParam){
				var courseId = this.course.courseId;
				this.auditionApplication.userId=this.userInfo.userId;
				this.auditionApplication.applicationName=this.userInfo.userUname;
				this.auditionApplication.courseId=courseId;
				this.auditionApplication.applicationDatetime=this.getNowDate();
				this.auditionApplication.createBy=this.auditionApplication.applicationName;
				this.$axios.post(this.Urls.nowSubcribe,this.auditionApplication).then(res=>{
					/* 弹出预约成功消息提示 */
					if(res.data.success){
						this.$refs.uToast.show({
							...messageParam
						})	
					}	
				});
				this.orderGiftPopupShow=false;
			},
			getNowDate() {
				var myDate = new Date;
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				var date = myDate.getDate(); //获取当前日
				var hours = myDate.getHours(); //获取当前小时
				var minutes = myDate.getMinutes(); //获取当前分钟
				var seconds = myDate.getSeconds(); //获取当前秒
				var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
				return now;
			},
			openBrowser(url){
				if(this.courseType==1){
					plus.runtime.openURL(url)
				}
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '暂无试听权限'
				});
			},  
		},
		filters: {
			//加密手机号
			filterTel(val) {
				if (val) {
					return (val.substring(3, 0)) + '****' + (val.substring(7));
				}
			}
		},
		//在页面渲染之前加载
		mounted(){
			this.$axios.get(this.courseUrl.selectCourseByCourseId+"?courseId="+this.course.courseId).then((res)=>{
				if(res.data.result){
					this.courseByCourseId=res.data.result
				}
			})
			//查看该课程的章节
			this.$axios.get(this.courseUrl.selectCourseSectionbyCourseId+"?courseId="+this.course.courseId).then((res)=>{
				if(res.data.result){
					this.getcousesection=res.data.result
				}
			})	
		},
		onLoad(option){
			this.course.courseId=option.courseId
			this.courseType=option.courseType
		},
	}
</script>

<style lang="scss">
	.base-info-wrap {
		background-color: #FFFFFF;
		padding: 24rpx 32rpx;
		margin-bottom: 24rpx;

		.title-wrap {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 20rpx;

			.title {
				color: $u-main-color;
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				color: $u-content-color;
				font-size: $u-p2;
			}
		}

		.list-wrap {
			background-color: #FFFFFF;

			

			.info-cell-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $u-content-color;
				font-size: $u-p2;
				padding: 15rpx 0;
				
				&:first-child {
					padding-top: 0;
				}

				.left {
					display: flex;
					align-items: center;
				}
			}
			
			.right-info {
				max-width: 500rpx;
			}
		}
	}


	.card-list-wrap {

		background-color: #FFFFFF;
		padding: 32rpx;
		margin-bottom: 24rpx;

		.card-header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title {
				font-size: $u-p;
				font-weight: bold;
			}
		}
		
		.des-content-wrap {
			// padding: 0 24rpx;
		}
		
		// 学校简介
		.school-card-wrap {
		
			.school-des-wrap {
				display: flex;
				align-items: flex-start;
				// border: 1rpx solid $u-border-color;
				border-radius: 20rpx;
				// padding: 24rpx;
				background-color: #FFFFFF;
				font-size: $u-p2;
				color: $u-main-color;
				// margin-bottom: 20rpx;
		
				.des {
					margin-left: 20rpx;
				}
			}
		
			.date-info {
				display: flex;
				// flex-direction: column;
				align-items: center;
				margin-bottom: 20rpx;
		
				.date-title {
					font-weight: bold;
					color: $u-main-color;
					font-size: $u-p2;
					margin-right: 10rpx;
				}
		
				.date {
					font-size: $u-p2;
					color: $u-content-color;
				}
			}
		
			.tags-wrap {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				font-size: $u-p2;
				color: $u-tips-color;
				margin-bottom: -20rpx;
		
				.tag {
					min-width: 175rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
				}
			}
		}
		
		
	}


	// 弹出层
	.popup-body {

		// 弹出优惠信息
		.coupon-card-wrap {
			border-radius: 10rpx;
			background-color: rgba($color: $u-primary-light-color, $alpha: 0.3);
			padding: 24rpx;
			font-size: $u-p2;
			margin-bottom: 20rpx;

			
			.list {
				margin-bottom: 10rpx;
				
				&:last-child {
					margin-bottom: 0rpx;
				}
				

				.name {
					font-weight: bold;
					margin-right: 20rpx;
				}
			}
		}

		.contact-tips-info {
			color: $u-main-color;
			font-size: $u-p2;
			margin-bottom: 20rpx;

			.phone-wrap {
				display: flex;
				align-items: center;

			}
		}

		.buy-tips-info {
			display: flex;
			align-items: center;
			color: $u-tips-color;
			font-size: $u-p3;

			// padding: 20rpx 0;
			.info {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
		}


		// 弹出层券
		.tikect-list-wrap {
			min-height: 500rpx;
			max-height: 80vh;
			overflow-y: scroll;

			.ticket-card-wrap {
				background-color: #fff;

				display: flex;
				align-items: center;

				margin-bottom: 20rpx;

				.ticket-left,
				.ticket-right {
					padding: 24rpx;
					border: 1rpx solid $u-border-color;
					height: 120rpx;
				}

				.ticket-left {
					width: 200rpx;
					border-right: 4rpx dashed $u-border-color;
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;

					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;



					color: $u-content-color;

					.price-wrap {
						color: $u-error;

						.sub {
							font-size: $u-sub;
						}

						.price {
							font-weight: bold;
							font-size: $u-hd;
						}
					}

					.name {
						font-size: $u-p2;
					}
				}

				.ticket-right {
					width: 500rpx;
					border-left: 0;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;


					display: flex;
					align-items: center;
					justify-content: space-between;

					.info-wrap {
						.name {
							font-weight: bold;
							color: $u-main-color;
							font-size: $u-p;
							margin-bottom: 20rpx;
						}

						.tips {
							color: $u-tips-color;
							font-size: $u-p3;
							margin: 20rpx 0 10rpx 0;
						}

						.date {
							color: $u-content-color;
							font-size: $u-p2;
						}
					}
				}
			}
		}

	}
</style>
